<template>
  <div>
    <div class="title">
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="goUpPage"
      />
    </div>
    <div class="content">
      <div class="c_content">
        <div class="background">
          <img :src="resData_result.large_img" alt="" />
        </div>
        <div class="c_c_detailed">
          <div class="center">
            <div class="center_detailed">
              <div class="c_d_title">
                <div class="c_d_name">
                  <p>{{ resData_result.name }}</p>
                  <span>{{ resData_result.enname }}</span>
                </div>
                <div class="c_d_price">&yen; {{ resData_result.price }}</div>
              </div>
              <div class="c_d_require">
                <ul>
                  <li v-for="(item_1, index_1) in rulesData" :key="index_1" :activeIndex="activeIndex">
                    <div class="c_d_require_left">{{ item_1.title }}</div>
                    <div>
                      <span
                        @click="selectSpecification(item_1,index_2)"
                        v-for="(item_2, index_2) in item_1.subRule"
                        :key="index_2"
                        :class="{active: index_2 === item_1.activeIndex}"
                        >{{ item_2.title }}
                        </span
                      >
                    </div>
                  </li>
                </ul>
              </div>
              <div class="c_d_num">
                <div>选择数量</div>
                <div class="num">
                  <van-stepper v-model="ShopbagCount" theme="round" button-size="20" disable-input />
                </div>
              </div>
              <div class="c_d_description">
                <p
                  style="font-size: 14px; font-weight: bold; margin-bottom: 5px"
                >
                  商品描述
                </p>
                <p v-for="(item, index) in resData_result.desc" :key="index">
                  {{ index + 1 }}. {{ item }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detailed_nav">
      <div class="Shop">
        <van-goods-action>
          <van-goods-action-icon @click="goPage('Shopbag')" :badge="ShopbagTotalCount > 0 ? ShopbagTotalCount:'' " color="#ccc" icon="bag" text="购物袋" />
          <van-goods-action-icon
            icon="like"
            :color="isLike ? 'blue' : '#ccc'"
            :text="isLike ? '已收藏' : '未收藏'"
            @click="linkAndNotLike()"
          />
          <van-goods-action-button color="#274BCB" text="加入购物车" @click="addShopbag()"/>
          <van-goods-action-button color="#0C34BA" text="立即购买" />
        </van-goods-action>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Detailed",
  data() {
    return {
      // 商品的详细信息对象
      resData_result: {},

      // 定义一个pid 接收 从Menu页面传进来的pid值
      pid: "",

      //  处理后的商品规格数据
      rulesData: "",

      // 定义一个boolean值 判断是否收藏
      isLike: "",

      // 用于选择商品规格
      activeIndex: 0,

      // 商品加入购物袋的数量
      ShopbagCount:1,

      // 购物袋的总数量
      ShopbagTotalCount:0,

      // 用来存储菜单页面tab的状态
      menu_tab_index:''
    }
  },
  created() {
    // 接收pid值
    this.pid = this.$route.query.pid;
    this.menu_tab_index = this.$route.query.index;
    
    

    // 调用根据pid获取商品详情数据接口的方法 传入pid
    this.getPidNumber(this.pid);

    // 调用查询是否被收藏的方法
    this.findUserLike();

    // 查询购物袋的总数量
    this.getShopbagCount()


  },
  methods: {
    // 根据pid获取商品详情数据接口的方法
    getPidNumber(pid) {
      this.axios({
        // 接口获取方式
        method: "get",
        // 接口地址  此处在main.js处理过 基础请求路径 所以可以简写
        url: "/productDetail",
        // 参数
        params: {
          // 此处还有个appkey参数 但在main.js里面配置了 拦截器配置过 所以可以省略
          pid,
        },
      })
        .then((res) => {
          // 
          this.resData_result = res.data.result[0];
          // 制作数据  商品数据格式处理成以下格式
          /**
           * [
              {
                title: '温度',
                activeIndex: 0,
                subRule: [
                  {title: '默认奶油'},
                  {title: '无奶油'},
                ]
              },
              {
                title: '温度',
                activeIndex: 0,
                subRule: [
                  {title: '默认奶油'},
                  {title: '无奶油'},
                ]
              }
            ]
           */
          // 开始处理数据
          if (res.data.code === 600) {
            // 
            // 处理商品描述 为什么要处理, 因为描述的数据格式不是我们想要的格式
            let data = res.data.result[0]; // 将当个商品的数据存在data变量, 方便接来下需要取res.data.result[o]这个值
            data.desc = data.desc.split(/\n/); // 根据/n这个符号切割data.desc 这个字符串
            // 
            // 处理规格
            let rules = ["cream", "milk", "sugar", "tem"]; // 为什么  因为data数据面有数组里面的单词, 方便遍历得到数据
            let rulesData = []; // 为什么  因为可以将每一项的规格定义成对象传入这个数组, 就可以形成上面我们想要的数组
            rules.forEach((v) => {
              // 遍历tules这个数组

              // 因为商品的规格不一样 所以有出现空的情况, 所以我们遇到空的时候
              if (!data[v]) {
                return;
              }
              //  // 查看v 是数组的每一项
              let rule = {
                // 定义代表每一个规格的对象
                title: data[`${v}_desc`],
                activeIndex: 0, // 这个自己定义的 用于切换子子规格的选项
                subRule: [], // 定义一个准备存子规格的数组
              };

              // 一下 处理子规格
              //  //  data[v], 冷/热  所以需要根据/符号切割成两个  否则不方便我们渲染
              let subRuleData = data[v].split(/\//); // 切割data[v]
              // 遍历这个子规格数组
              subRuleData.forEach((item) => {
                // 将子规格的每一项数组存在对象里面 然后push进我们刚刚定义好的子规格数组里面
                rule.subRule.push({ title: item });
              });

              // 将所有的rule对象都push到rulesData里面去
              rulesData.push(rule);
            });
            this.rulesData = rulesData;
            // 
            
          }
        })
        .catch((err) => {
          
        });
    },

    // 放回上一页
    goUpPage() {
      if(this.menu_tab_index){
        this.$router.push({name:"Menu",query:{index:this.menu_tab_index}})
        return
      }
      this.$router.go(-1);
    },

    // 如果用户已经登录, 则根据商品pid查询当前商品是否被收藏
    findUserLike() {
      // 获取token
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      // 调用接口查询是否存在数据
      this.axios({
        method: "get",
        url: "/findlike",
        params: {
          pid: this.pid,
          tokenString,
        },
      })
        .then((res) => {
          
          if (res.data.code === 1000 && res.data.result.length === 1) {
            this.isLike = true;
          }
        })
        .catch((err) => {
          
        });
    },

    // 切换收藏状态
    linkAndNotLike() {
      //根据isLike判断商品是否被收藏
      let url = "";
      if (this.isLike) {
        //如果商品已经被收藏, 则执行取消收藏
        url = "/notlike";
      } else {
        url = "/like";
      }

      // 从cookie里面获取 获取token 因为登录的时候已经存在cookie了
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      

      this.axios({
        // post请求方式, post请求方式需要自己在main.js配置
        method: "post",
        // 因为在main.js里面配置了基础路径, 所以这里只要写 接口地址最后的/link
        url,
        data: {
          // 这个详情页的pid
          pid: this.pid,
          // token 先乱写一个 因为token是需要登录后才有的, 现在还没有登录
          tokenString,
        },
      })
        .then((res) => {
          

          // 这里700在接口数据里面代表没有登录
          if (res.data.code == 700) {
            // 提示登录,
            this.$toast("请登录");
            // 使用延迟函数 两秒后跳转到名为Login的路由页面
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 1000);
            return;
          }
          if (res.data.code === 800) {
            // 表示已经收藏
            this.$toast("收藏成功");
            this.isLike = true;
          } else if (res.data.code === 900 && res.data.result === 1) {
            this.isLike = false;
          }
        })
        .catch((err) => {
          
        });
    },

    // 选择商品规格
    selectSpecification(item,index) {
      item.activeIndex = index
    },

    // 如果用户登录, 则拿到购物袋的总数量
    getShopbagCount(){
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      
      this.axios({
        method:"get",
        url:"/shopcartCount",
        params:{
          tokenString
        }
      }).then(res => {
        
        if(res.data.code === 4000){
          this.ShopbagTotalCount = res.data.result
          
        }

      }).catch(err =>{
        
      })
    },

    // 加入购物袋
    addShopbag(){
      // 从cookie上获取值
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      
      // 获取商品规格
      let rules = this.rulesData

      // 处理
      let selectRule= [];
      rules.forEach(v=>{
        selectRule.push(v.subRule[v.activeIndex].title)
      })
      
       this.axios({
         method:"post",
         url:"/addShopcart",
         data:{
           pid:this.pid,
           count:this.ShopbagCount,
           rule:selectRule.join("/"),
           tokenString
         }
       }).then(res=>{
         if(res.data.code === 3000){
           this.ShopbagTotalCount += this.ShopbagCount
           console.log("addshop",res)
         }
       }).catch(err=>{
         
       })
    },

    // 跳转页面的公用方法
    goPage(name){
      this.$router.push({name})
    }
  },
};
</script>

<style lang="less" scoped>
ul,
p {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.title {
  width: 100%;
  height: 50px;
  position: fixed;
  line-height: 50px;
  .icon {
    position: absolute;
    left: 10px;
    .i_icon {
      vertical-align: middle;
    }
  }
  .t_title {
    margin: auto;
    text-align: center;
    height: 100%;
    line-height: 50px;
    font-size: 18px;
  }
}
.content {
  position: fixed;
  // height: 500px;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 50px;
  background-color: #fff;
  overflow-y: auto;
  .c_content {
    // height: 1000px;
    .background {
      width: 100%;
      height: 200px;
      background-color: burlywood;
      img {
        width: 100%;
      }
    }
    .c_c_detailed {
      width: 100%;
      height: 100%;
      background-color: #fff;
      position: relative;
      .center {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        width: 90%;
        border-radius: 10px 10px 0 0;
        // height: 200px;
        margin: auto;
        background: #f0f0f0;
        padding: 15px 10px 10px 10px;
        .center_detailed {
          width: 100%;
          // height: 100%;
          // background: royalblue;
          .c_d_title,
          .c_d_num {
            display: flex;
            justify-content: space-between;
          }
          .c_d_title {
            height: 50px;
            // background-color: salmon;
            p {
              font-size: 16px;
              font-family: "微软雅黑";
              font-weight: bold;
            }
            .c_d_price {
              font-weight: bold;
              color: blue;
              font-size: 14px;
            }
          }
          .c_d_require {
            // height: 60px;
            // background: cadetblue;
            padding-bottom: 10px;
            border-bottom: 1px solid #ccc;
            ul {
              width: 100%;
              li {
                box-sizing: border-box;
                width: 100%;
                // background: chocolate;
                height: 30px;
                margin-bottom: 5px;
                padding: 5px 0;
                &::after {
                  content: "";
                  display: block;
                  clear: both;
                }
                div {
                  float: left;
                  height: 100%;
                  line-height: 20px;
                }
                .c_d_require_left {
                  width: 15%;
                }
                span {
                  display: inline-block;
                  width: 50px;
                  text-align: center;
                  height: 100%;
                  background: #ccc;
                  border-radius: 20px;
                  margin-right: 10px;
                }
                .active {
                  background: blue !important;
                  color: #fff;
                }
              }
            }
          }
          .c_d_num {
            height: 50px;
            // background: skyblue;
            align-content: center;
            border-bottom: 1px solid #ccc;
            div {
              line-height: 50px;
            }
            .num {
              /deep/ .van-stepper--round .van-stepper__minus {
                color: blue !important;
                background-color: #fff;
                border: 0.02667rem solid blue !important;
              }
              /deep/ .van-stepper--round .van-stepper__plus {
                color: #fff;
                background-color: blue !important;
              }
            }
          }
          .c_d_description {
            padding: 10px 0 0 0;
          }
        }
      }
    }
  }
}
</style>